<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue常见指令</title>
    <script src="../js/vue.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<!--
    v-if      true 显示  false 隐藏
    v-show    true 显示  false 隐藏

    区别:
     v-show : 通过改变节点对象的display的值 实现显示和隐藏
     v-if :  通过删除节点对象实现元素的隐藏

    如何选择:
     节点对象频繁的进行显示和隐藏操作   推荐使用 v-show

     vue 实现事件的绑定  v-on:事件名  简化  @事件名

     事件的回调函数如何定义?  可以将回调函数定义在 methods属性中
     this  -> vm 实例    数据代理
-->
<div id="app">
    <h1>age={{age}}</h1>
    <div id="box" v-show="bln"></div>
    <button v-on:click="isShow">显示或隐藏</button>
    <button v-on:click="add">+1</button>
    <button v-on:click="addByStep(10)">+10</button>
    <!--    单击事件的定义 可以简化-->
    <button @dblclick="addByStep(5)">@+5</button>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            bln: true,
            age: 20
        },
        methods: {
            isShow() {
                this.bln = !this.bln
            },
            add() {
                this.age++
            },
            addByStep(val) {
                this.age = this.age + val
            }
        }
    })

</script>
</body>
</html>
